<template>
	<view class="normal-login-container">
		<view class="logo-content">
			<image style="width: 100px;height: 100px;border-radius: 50%;" src="../../static/logo.png" mode="widthFix">
			</image>
			<br />
			<br />
			<text class="title">运油宝-司机-找回密码</text>
		</view>
		<view class="uni-padding-wrap uni-common-mt" style="padding-top: 30px;">
			<uni-segmented-control :current="current" :values="items" styleType="text"
				active-color="#007aff" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<view class="login-form-content">
					<view class="input-item" style="display: flex;justify-content: center;align-items: center;">
						<view class="icon">
							<uni-icons type="flag" size="19"></uni-icons>
						</view>
						<input v-model="phoneForm.dept" class="input" type="text" placeholder="服务商名称/服务商ID" maxlength="30" />
					</view>
					<view class="input-item" style="display: flex;justify-content: center;align-items: center;">
						<view class="icon">
							<uni-icons type="person" size="19"></uni-icons>
						</view>
						<input v-model="phoneForm.phone" class="input" type="text" placeholder="请输入手机号" maxlength="11" />
					</view>
					<view class="input-item"
						style="width: 60%;margin: 0px;display: flex;justify-content: center;align-items: center;">
						<view class="icon">
							<uni-icons type="checkbox" size="19"></uni-icons>
						</view>
						<input v-model="phoneForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
						<view style="height: 45px;float: right;">
							<view hover-class="buttonHover" @click="getPhonecode"
								style="height: 45px;position: absolute;margin-left: 10px;width: 104px;background-color: #f5f6f7;display: flex;justify-content: center;align-items: center;border-radius: 20px;">
								{{codeBtn.codeText}}
							</view>
						</view>
					</view>
					<view class="action-btn">
						<button @click="handlePhone" hover-class="btnHover" class="login-btn">确定</button>
					</view>
				</view>
			</view>
			<!-- <view v-if="current === 1">
				<view class="login-form-content">
					<view class="input-item" style="display: flex;justify-content: center;align-items: center;">
						<view class="icon">
							<uni-icons type="flag" size="19"></uni-icons>
						</view>
						<input v-model="emailForm.unit" class="input" type="text" placeholder="服务商名称/服务商ID" maxlength="30" />
					</view>
					<view class="input-item" style="display: flex;justify-content: center;align-items: center;">
						<view class="icon">
							<uni-icons type="email" size="19"></uni-icons>
						</view>
						<input v-model="emailForm.email" class="input" type="text" placeholder="请输入邮箱地址" maxlength="30" />
					</view>
					<view class="action-btn">
						<button @click="handleEmail" hover-class="btnHover" class="login-btn">确定</button>
					</view>
				</view>
			</view> -->
		</view>
		

	</view>
</template>

<script>
	import {
		regSendResetPwd,
		phone_resetPwd
	} from '@/api/login'

	export default {
		data() {
			return {
				items: ['手机找回'],
				current: 0,
				// 用户注册开关
				register: false,
				phoneForm: {
					dept: "",
					phone: "",
					code: ""
				},
				emailForm: {
					dept: "",
					email: ""
				},
				//验证规则
				rules: {
					phone: {
						rule: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						msg: "请输入正确的手机号"
					},
					code: {
						rule: /^[0-9]{4}$/,
						msg: "请输入正确的验证码"
					}
				},
				//验证码按钮
				codeBtn: {
					codeTime: 60,
					codeText: "获取验证码",
					codeStatus: true
				},
			}
		},
		created() {

		},
		methods: {
			//判断验证是否符合要求，合法性校验
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this.phoneForm[key])) {
					//提示信息
					uni.showToast({
						title: this.rules[key].msg,
						icon: 'none'
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			//获取验证码按钮点击计时事件
			getPhonecode() {
				let that = this
				let queryParams = {
					phone: this.phoneForm.phone
				}
				if (this.validate('phone') && this.codeBtn.codeStatus) {
					regSendResetPwd(this.phoneForm.dept,queryParams).then(res => {
						//如果发送验证码成功
						if (res.data) {
							uni.showToast({
								title: '已发送至您的手机',
								icon: 'none'
							})
							this.codeBtn.codeStatus = false
							let timerId = setInterval(() => {
								let codetime = that.codeBtn.codeTime
								codetime--
								that.codeBtn.codeTime = codetime
								that.codeBtn.codeText = codetime + "s"
								if (codetime < 1) {
									clearInterval(timerId)
									that.codeBtn.codeText = "重新获取"
									that.codeBtn.codeTime = 60
									that.codeBtn.codeStatus = true
								}
							}, 1000)
						}
						else
						{
							uni.showToast({
								title: '验证码发送失败',
								icon: 'none'
							})
						}
					})
			
				}
			},
			// 手机号找回方法
			async handlePhone() {
				if (!this.validate('dept')) return;
				if (!this.validate('phone')) return;
				if (!this.validate("code")) return;
				
				if (this.phoneForm.dept === "") {
					uni.showToast({
						icon: 'none',
						title: '请输入您的服务商ID'
					})

				} else {
					uni.showLoading({
						mask: true,
						title: '正在修改...'
					})
					this.phoneChangePassword()
				}
			},
			// 手机号修改密码
			async phoneChangePassword() {
				phone_resetPwd(this.phoneForm).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						uni.showToast({
							icon:'success',
							title:'密码修改成功!'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//邮箱找回
			async handleEmail(){
				if (this.emailForm.dept === "") {
					uni.showToast({
						icon: 'none',
						title: '请输入您的组织'
					})
				
				} else if (this.emailForm.email === "") {
					uni.showToast({
						icon: 'none',
						title: '请输入您的邮箱'
					})
				} else {
					uni.showLoading({
						mask: true,
						title: '正在修改...'
					})
					this.emailChangePassword()
				}
			},
			// 邮箱修改密码
			async emailChangePassword() {
				// register(this.register).then(res => {
				// 	uni.hideLoading()
					
					
				// }).catch(error => {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: res.msg
				// 	})
				// })
			},

		}
	}
</script>

<style lang="scss" scoped>
	.normal-login-container {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;
		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
				background-color: #0081ff;
				color: white;
			}
		}
	}

	.btnHover {
		transform: translate(1px, 1px);
	}
	.buttonHover {
		opacity: 0.6;
	}
</style>